// 文件查找的规则   先从当前文件下去查找 对应的node_modules 如果有就用自己的 
// 如果没有那么找上一层 再没有继续上一层 直到 c盘 


// const path = require('path')
const {resolve}=require('path')


const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports={
    entry:"./src/index.js",
    output: {
        filename: 'js/built.js',
        path: resolve( __dirname, 'build')
        },

        module: {
            rules: [
                // 详细 loader 配置
                // 不同文件必须配置不同 loader 处理
                {
                    // 匹配哪些文件
                    test: /\.css$/,
                    // 使用哪些 loader 进行处理
                    use: [
                        // use 数组中 loader 执行顺序：从右到左，从下到上 依次执行
                        // 创建 style 标签，将 js 中的样式资源插入进行，添加到 head 中生效
                        'style-loader',
                        // 将 css 文件变成 commonjs 模块加载 js 中，里面内容是样式字符串
                        'css-loader'
                    ]
                },
                {
                    test: /\.less$/,
                    use: [
                        'style-loader', 'css-loader', 'less-loader'
                        // 将 less 文件编译成 css 文件
                        // 需要下载 less-loader 和 less 'less-loader'
                    ]
                },
                {
                    test: /\.(jpg|png|gif)$/,
                    use: [{
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            // 问题：因为 url-loader 默认使用 es6 模块化解析，而 html-loader 引入图片是 commonjs
                            // 解析时会出问题：[object Module]
                            // 解决：关闭 url-loader 的 es6 模块化，使用 commonjs 解析
                            esModule: false,
                            // 给图片进行重命名
                            // [hash:10]取图片的 hash 的前 10 位
                            // [ext]取文件原来扩展名
                            name: '[hash:10].[ext]'
    
    
                        },
                    }, ],
    
                },
                {
                    test: /\.html$/,
                    // 处理 html 文件的 img 图片（负责引入 img，从而能被 url-loader 进行处理）
                    loader: 'html-loader'
                    }
    
            ]
        },

        plugins: [
            // plugins 的配置
            // html-webpack-plugin
            // 功能：默认会创建一个空的 HTML，自动引入打包输出的所有资源（JS/CSS）
            // 需求：需要有结构的 HTML 文件
            new HtmlWebpackPlugin({
                // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
                template: './src/index.html'
            })
        ],
    
    
        mode: 'development' //开发环境       production   线上环境
    
    
            
}